<template>
  <h3>{{ x.y }}</h3>
  <button @click="x.y++">点我加1</button>  <!-- 响应不了 因为使用shallowref，对象x里的属性y不是响应式的了 -->
  <button @click="x={y:888}">替换x</button>  <!-- y不发生改变 改变的是x 也就是生新的对象来替换 -->
  <h4>{{ person }}</h4>
  <h1>{{ name }}</h1>
  <h1>{{ age }}</h1>
  <h1>{{ job.j1.salary }}</h1>
  <button @click="name += '-'">点击修改名字</button>
  <button @click="age++">点击修改年龄</button>
  <button @click="job.j1.salary++">涨</button>
</template>
  
<script>
import { ref,reactive, toRef,toRefs,shallowReactive,shallowRef } from "vue";

export default {
  name: "Demo",

  setup() {
    //let person = shallowReactive  //只考虑第一层的响应式
    let person = reactive({
      name: "林润钿",
      age: 18,
      job: {
        j1: {
          salary: 20,
        },
      },
    });


 let x= shallowRef({
  y:0
 })
 console.log(x);

    return {
      person, 
       ...toRefs(person),
       x
    };
  },
};
</script>
  
  <style>
</style>
  